import { memo } from "react";
import CourseListStyle from "./style";
import { Button, Ellipsis, List } from "antd-mobile";
import { ListItem } from "antd-mobile/es/components/list/list-item";

const CourseList = memo(
  (props: {
    reserveBtnClick: (id: string) => void;
    data: { id: string; name: string; desc: string }[];
  }) => {
    const { data, reserveBtnClick } = props;
    const reserveClick = (id: string) => {
      reserveBtnClick(id);
    };
    return (
      <CourseListStyle>
        <List>
          {data.map((item) => (
            <ListItem
              key={item.id}
              title={"课程：" + item.name}
              description={
                <Ellipsis
                  direction="end"
                  rows={2}
                  content={"简介：" + item.desc}
                  expandText="展开"
                  collapseText="收起"
                />
              }
              extra={
                <Button color="primary" onClick={() => reserveClick(item.id)}>
                  预约
                </Button>
              }
            />
          ))}
        </List>
      </CourseListStyle>
    );
  }
);

export default CourseList;
